• 4.8.0 - 2024-02-05
  

  This release includes the ability to update the crown logo. You must do this between 19 February and 1 March 2024.

  We’ll send reminders to our mailing list and cross-government Slack as soon as you can make this change.

  New features

  Update to the new GOV.UK logo (between 19 February and 1 March 2024)

  We’ve updated the GOV.UK logo to reflect the changing of the monarch. King Charles III uses the Tudor Crown, rather than the St Edward’s Crown chosen by Queen Elizabeth II.

  If your service uses GOV.UK branding, you must update your service to use the new crown.

  These changes were made in the following pull requests:

  • #4376: Implement the Tudor crown favicons (v4.x)
  • #4278: Implement the Tudor crown in the Header component (v4.x)
  • #4677: Adjust the spacing of the new Tudor crown (v4.x) - thanks to @ MartinJJones and @ monicacrusellasfanlo for contributing this change

  Include the new logo assets

  Multiple new image assets are included in this release. You’ll need to copy these to your service's image assets folder if they are not being used directly from the Frontend package. By default this folder is located at /assets/images.

  If you’re using Nunjucks, the asset path may have been changed by the assetPath global variable or assetsPath parameter on the header component.

  Copy the following files from /dist/assets/images into your assets folder. Any images with the same name as an existing image can be safely overwritten.

  • favicon.ico
  • govuk-apple-touch-icon-152x152.png
  • govuk-apple-touch-icon-167x167.png
  • govuk-apple-touch-icon-180x180.png
  • govuk-apple-touch-icon.png
  • govuk-logotype-tudor-crown.png
  • govuk-mask-icon.svg
  • govuk-opengraph-image.png

  Update the logo in the header of your page

  If you are using the govukHeader Nunjucks macro in your service, add the useTudorCrown parameter to the macro instantiation.

  {{ govukHeader({
    ...
    useTudorCrown: true
  }) }}

  If you are not using the Nunjucks macro, locate the HTML for the existing crown and replace it with this updated HTML. Make sure the URL for the new PNG fallback image is correct.

  <!--[if gt IE 8]><!-->
  <svg
    aria-hidden="true"
    focusable="false"
    class="govuk-header__logotype-crown"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 32 30"
    height="30"
    width="32"
  >
    <path
      fill="currentColor" fill-rule="evenodd"
      d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
  </svg>
  <!--<![endif]-->
  <!--[if IE 8]>
  <img src="/assets/images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
  <![endif]-->

• 4.7.0 - 2023-07-06
  

  New features

  Added the Exit This Page component to help users quickly exit a page or service

  You can now choose to use the exit this page component to help users quickly leave a page or service which contains sensitive information.

  This was added in pull request #2545: Add exit this page component.

  Added inverse modifier for buttons on dark backgrounds

  You can now choose to use the govuk-button--inverse class to style buttons on dark backgrounds with a white background colour.

  This change was made in pull request #3556: Add inverse button styles.

  Added inverse modifier for breadcrumbs on dark backgrounds

  You can now choose to use the govuk-breadcrumbs--inverse class to style breadcrumbs on dark backgrounds with white text, links and arrows.

  This change was made in pull request #3774: Add inverse breadcrumb and back link modifiers and styles.

  Added inverse modifier for back links on dark backgrounds

  You can now choose to use the govuk-back-link--inverse class to style back links on dark backgrounds with white links and arrows.

  This change was made in pull request #3774: Add inverse breadcrumb and back link modifiers and styles.

  Fixes

  We’ve made fixes to GOV.UK Frontend in the following pull requests:

  • #3817: Fix package resolution in Node.js 17+
  • #3836: Announce whitespace in screen reader announcements of visually hidden text
• 4.6.0 - 2023-04-20
  

  New features

  Updated the appearance of disabled form controls

  We’ve updated the disabled state of Text Input, Textarea, Select and File Upload components so it is consistent across browsers and devices. They’re also now consistent with the existing disabled styles for Buttons, Checkboxes, and Radios.

  Disabled form controls appear at 50% opacity and with an alternative cursor appearance when hovered over.

  This was added in pull request #3187: Add disabled styles for form controls.

  Added a top-level disabled parameter to form controls

  We’ve updated the Nunjucks macros for Text Input, Textarea, Select and File Upload components to include a top-level disabled parameter. This will make it easier to enable the disabled state for these controls.

  {{ govukInput({
    id: "disabled-input",
    name: "disabled-input",
    value: "Unchangeable value",
    disabled: true
  }) }}

  Disabled form controls have poor contrast and can confuse some users, so avoid them if possible.

  Only use disabled form controls if research shows it makes the user interface easier to understand.

  This was added in pull request #3187: Add disabled styles for form controls.

  Configure whether the Accordion remembers and restores sessions

  By default, when a user leaves a page, the Accordion will remember the layout of expanded and collapsed sections selected by the user. If the user returns to the page, this layout will be restored and override any sections manually set as expanded in code.

  You can now disable this functionality by using the rememberExpanded option in the govukAccordion Nunjucks macro.

  If you're not using the Nunjucks macro, you can disable it using the data-remember-expanded HTML attribute.

  This was added in pull request #3342: Add option to disable sessionState in Accordion.

  Added id parameter to Buttons

  We’ve updated the Button Nunjucks macro to include an optional id parameter.

  {{ govukButton({
    text: "Save and continue",
    id: "continue-button"
  }) }}

  This was added in pull request #3344: Adding optional ‘id’ attribute to button component.

  Thanks to @ TomBillingtonUK for this contribution.

  Added a modifier for text input styles that accept sequences of digits

  We've added a new .govuk-input--extra-letter-spacing class for Text Input. This increases readability of text inputs that receive sequences of digits (like security codes, references or phone numbers).

  You can add it through the classes option when using Nunjucks, or directly in the class attribute of the <input> when using HTML.

  This was added in pull request #2230: Add extra letter spacing modifier for inputs

  Deprecated features

  Stop using JavaScript API properties other than the init method

  We have deprecated all of the JavaScript properties in the API, except for the init method for each component. We'll make all of the deprecated JavaScript properties private in our next main release.

  Please let us know if you're using parts of the API other than the init method by filling in this form. We'll use this information when prioritising future additions to the public API.

  This was added in pull request #3499: Deprecate all JavaScript instance properties the except init method.

  Stop using the .govuk-button--disabled class on buttons

  We have deprecated the .govuk-button--disabled class and will remove it in the next major release.

  If a Button uses a <button> or <input> element, use the disabled HTML attribute instead.

  You will not need to make any changes if you're using the govukButton Nunjucks macro.

  Disabling links that are styled to look like buttons will not be supported by future releases.

  This was added in pull request #3326: Deprecate govuk-button--disabled class.

  Stop using the deprecated Internet Explorer 8 mixins and settings

  The next main release of GOV.UK Frontend will remove support for Internet Explorer 8 (IE8). In preparation for this, we've deprecated the settings and mixins used when generating IE8 specific stylesheets.

  You'll start seeing deprecation warnings if you're:

  • using the govuk-if-ie8 and govuk-not-ie8 mixins in your own Sass code (for example @ include govuk-if-ie8)
  • changing the $govuk-is-ie8 and $govuk-ie8-breakpoint settings to anything other than their default values

  If you no longer need to support IE8, we recommend you stop generating an IE8 specific stylesheet and remove references to the IE8 mixins from your code.

  You can also silence these deprecation warnings by adding ie8 to the $govuk-suppressed-warnings setting, but once we’ve released v5.0 you will need to address them as part of the upgrade process.

  Fixes

  We’ve made fixes to GOV.UK Frontend in the following pull requests:

  • #3255: Including the JavaScript source map in the prototype kit config
  • #3272: Add empty alt attribute to logo IE8 fallback PNG
  • #3306: Re-enable complete hover link styles on the footer
  • #3312: Add default value for warning text icon fallback attribute
  • #3426: Add organisation brand colour for Department for Business & Trade - thanks to @ baisa for contributing this change
  • #3454: Update default link underline offset setting
• 4.5.0 - 2023-01-31
  Read more
• 4.4.1 - 2022-12-16
• 4.4.0 - 2022-11-14
• 4.3.1 - 2022-08-18

• f706252 Merge pull request #4732 from alphagov/release-4.8.0
• b625c12 Release v4.8.0
• 95dc753 Merge pull request #4677 from alphagov/adjust-tudor-crown-spacing
• f607a83 Add pull request entry to v4.8.0 release changelog
• 0d05223 Adjust the spacing of the new Tudor crown
• bfe1c39 Merge pull request #4619 from alphagov/v4.8.0-changelog
• 78e25b8 Add changelog for v4.8.0 release
• 3e0306d Merge pull request #4602 from alphagov/v4-update-npm-version
• d481607 Bump minimum Node version, allow using npm v10
• 92462b3 Merge pull request #4376 from alphagov/new-favicons-v4
• 4ec49ae Merge pull request #4278 from alphagov/new-crown-v4
• 45ec2c4 Implement the Tudor crown in the header component
• 52bd10e Implement Tudor crown icons in place
• 6cb6a1e Merge pull request #4234 from alphagov/4.x-support-branch-docs
• 08605bb Move support branches docs to team docs
• 5f15a4d Merge pull request #4180 from alphagov/v4-percy-target-branch
• 97838f0 Pin Percy to latest commit on the target branch
• 87b6670 Set Percy target branch
• a576f86 Merge pull request #4001 from alphagov/backport-npm-version
• 0afe4c7 Merge pull request #3990 from alphagov/4.7.0-fixes-list
• e58390e Merge pull request #4014 from alphagov/backport-github-actions
• c2d49ad Merge pull request #4004 from alphagov/backport-source-map-sources
• 9034932 Fix GitHub Action “Setup Node.js” `use-cache` default
• 59b61dd Bump GitHub `actions/setup-node` to v3.7.0

Compare